<template>
        <el-form  
                ref="loginForm"
                :model="loginFormData"
                status-icon
                :rules="rules"
                label-width="120px"
                class="demo-loginFormData"  >
                <el-form-item label="用户名" prop="username" class="u-form-item">
                    <el-input v-model="loginFormData.username" type="input" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password" class="u-form-item">
                    <el-input  v-model="loginFormData.password" type="password"  autocomplete="off"/>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha" class="c-form-item"> 
               
                    <el-input v-model="loginFormData.captcha" maxlength="5" @keydown.enter="submitForm(loginForm)" />
                    <div class="code" v-html="captcha" @click="getRet"
                    v-loading="loading"></div>
                </el-form-item>
                <el-form-item class="u-form-item">

                    <el-button type="primary" @click="submitForm(loginForm)">提交</el-button>

                    
                </el-form-item>
    </el-form>


    
  </template>
  
  <script setup>
//   引入接口
  import * as api from "../../api/users"
  import { reactive, ref, onMounted, onUnmounted } from 'vue'
  import {rules, useSubmitForm, validatePassword} from "../../componsition/login/validate"

//   引入路由对象
import {useRouter} from "vue-router"

// 引入store
import {useUser} from "@/store/users.js"

// 引入loading动画
import { ElLoading } from 'element-plus' 

let router =useRouter()


// 使用 store
let userStore =useUser()
  
  const loginForm = ref()

  let loading =ref(true)

//   校验函数
//表单校验成功之后，回调的方法
let validateSuccess=()=>{
    console.log("校验成功")
    // 登入请求之后要先校验验证码 并全部转成小写
    verifyCaptcha(loginFormData.captcha.toLowerCase())

   
}
//表单校验失败，回调的方法
let validateFailed=()=>{
    console.log("校验失败")
}
  

// 使用submitForm
let submitForm =useSubmitForm(validateSuccess,validateFailed)

  const loginFormData = reactive({
    username: '',
    password: '',
    captcha: '',
  })
  

  
  const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
  }


// 声明一个展示验证码的响应式变量
let captcha = ref()
// 获取验证码 
let getRet=async()=>{
    // 一旦发起请求就要打开loading动画
    loading.value=true
    let res =await api.getCaptchaApi();

    loading.value=false
    if(res.data.state) captcha.value =res.data.img
}
 

// 声明loadingInstance 用来存储loading动画实例
let loadingInstance =null
// 校验验证码 
let verifyCaptcha =async captcha=>{
    // 发起登入请求的时候加载loading动画
    loadingInstance=ElLoading.service({
    text:"正在加载...",
    background:"rgba(0,0,0,.4)"
   })
    
    try {
        let res=await api.verifyCaptchaApi(captcha)
        console.log(res)
        // 发起登入请求
        login(loginFormData.username,loginFormData.password)

    }catch(e){
        // console.log(e)
         // 验证码校验示范 需要重新刷新新的验证码
         getRet()

          // 登入失败也得关闭加载动画
        loadingInstance.close()

    }
       
    }


/**
 * 
 * @param {String} username 用户名
 * @param {String} password 密码
 */

// 用户名密码登入逻辑
let login =async(username,password)=>{
    
    try {
        // 调用登入请求的接口
        let res=await api.loginApi(username,password)
        if(res.data.state){
        // 储存token,存到绘画存储里面
        sessionStorage.setItem("whc-token",res.data.token)

        // 储存用户信息
        userStore.$patch({
            userInfo: res.data.userInfo
        })
        // 登入成功需要跳转页面
        router.push("/")
        // 关闭loading加载动画
        loadingInstance.close()

     }
    }catch(e){
        // 登入失败也得关闭加载动画
        loadingInstance.close()

        console.log(e)
    }
     
}
 
onUnmounted(()=>{
    // 关闭加载动画
    // console.log("组件被卸载了")
    loadingInstance &&loadingInstance.close()
})

// 调用
onMounted(()=>{
    getRet()
})



  </script>

<style lang="less" scoped>
        

.u-form-item{
    color: white !important;
    .el-input{
        width: 200px !important;
    }
    .el-button{
        width: 200px !important ;

    }
    :deep(.el-form-item__label){
        color:white
    }
   a{
  
    margin:10px 0  0 55px ;
   }
   

}
.c-form-item{
    .el-input{
        width: 100px !important; 
       
    }
    :deep(.el-input__wrapper){
        border-radius: 4px 0 0 4px;
        box-shadow: none;
    }
    :deep(.el-form-item__label){
        color:white
    }
    
    .code{
        width: 100px;
        height: 32px;
        // border: 1px solid;
        background-color: white;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        
    }
  
}

.loginOline{
    width: 400px;
    height: 550px;
    background-color: rgba(0,0,0, .3);
    position: fixed;
    right: 10%;
    top: 25%;
    
   
    h1{
        padding: 90px 0  20px 0;
        text-align: center;
        color: white ;
    }


   
}










</style>

